<template>
	<view class="all">
		<view class="bg"></view>
		<view class="mess">
			<view class="messItem">
				<view class="messLeft">
					<view>支付成功通知</view>
					<view>您已成功支付56.9元</view>
				</view>
				<view class="time">2025.10.23 11:09:23</view>
			</view>
			<view class="messItem">
				<view class="messLeft">
					<view>支付成功通知</view>
					<view>您已成功支付56.9元</view>
				</view>
				<view class="time">2025.10.23 11:09:23</view>
			</view>
			<view class="messItem">
				<view class="messLeft">
					<view>支付成功通知</view>
					<view>您已成功支付56.9元</view>
				</view>
				<view class="time">2025.10.23 11:09:23</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	
</script>

<style scoped>
/* 全局背景 */
.all{
	padding-top: 10rpx;
	box-sizing: border-box; 
	position: relative;
	z-index: 1;
}
.bg{
	background-color: #0472fe;
	width: 100%;
	height: 300rpx;
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
}	       
.mess{
	background-color: #fff;
	margin:  10rpx;
	padding: 20rpx 20rpx 0rpx 20rpx;
	border-radius: 20rpx;
	
}
.messItem{
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #eee;
}
.messLeft :nth-child(1){
	font-size: 30rpx;
	margin: 20rpx 0;
}
.messLeft :nth-child(2){
	font-size: 26rpx;
	opacity: .8;
	margin: 10rpx 0;
	padding-bottom: 20rpx;
}
.time{
	opacity: .4;
	margin-top: 20rpx;
}
</style>
